<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>历史记录</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="/command/jquery/jquery-3.4.1.js"></script>
    <link rel="stylesheet" type="text/css" href="/command/bootstrap-4.4.1-dist/css/bootstrap.css">
    <script type="text/javascript" src="/command/bootstrap-4.4.1-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" type="text/css" href="/chat/css/style.css">

</head>

<body>
<div>
    <ul class="searchform text-right">
        <li>
            <form th:action="@{'/chatHistory1ByText/'+${uid}+'&'+${oid}+'&1/'}">
                <input type="text" placeholder="根据消息内容搜索"
                       name="text"
                       th:value="*{text}"
                       style="border: 1px solid #E6E6E6;width:240px;">
                <input type="submit" value="搜索" class="btn btn-success">
            </form>
        </li>
    </ul>
    <div data-role="content" class="container" role="main">
        <div style="overflow: auto;height: 500px" id="messageData">

            <ul th:each="message : ${messageList}"
                class="content-reply-box mg10"
                th:if="${count}!=0">
                <li class="even" th:if="${message.fromId}==${oid}">
                    <a class="user" href="#">
<!--                        <div id = "image" class="img-responsive avatar_"></div>-->
                        <img class="img-responsive avatar_ avatar_1" src="/chat/images/avatar-1.png" alt="">
                        <span class="user-name" th:text="${message.fromName}"></span></a>
                    <div class="reply-content-box">
                        <span class="reply-time" th:text="${message.messageDate}"></span>
                        <div class="reply-content pr">
                            <span class="arrow">&nbsp;</span>
                            <div th:text="${message.messageText}"></div>
                        </div>
                    </div>
                </li>

                <li class="odd" th:if="${message.fromId}==${uid}">
                    <a class="user" href="#">
<!--                        <div id = "oImage" class="img-responsive avatar_"></div>-->
                        <img class="img-responsive avatar_ avatar_2" src="/chat/images/avatar-1.png" alt="">
                        <span class="user-name" th:text="${message.fromName}"></span></a>
                    <div class="reply-content-box">
                        <span class="reply-time" th:text="${message.messageDate}"></span>
                        <div class="reply-content pr">
                            <span class="arrow">&nbsp;</span>
                            <div class="cus_scrpit" th:text="${message.messageText}"></div>
                        </div>
                    </div>
                </li>

            </ul>
        </div>
    </div>

    <div class="container" th:if="${count}!=0">
        <ul class="pagination">
            <li class="page-item"><a class="page-link"
                                     th:href="@{'/chatHistory1ByText/'+${uid}+'&'+${oid}+'&1/?text='+${text}}"
                                     th:if="${pageNo}!=1">首页</a></li>
            <li class="page-item"><a class="page-link" aria-label="Previous"
                                     th:href="@{'/chatHistory1ByText/'+${uid}+'&'+${oid}+'&'+${pageNo-1}+'/?text='+${text}}"
                                     th:if="${pageNo}!=1">&larr;上一页</a></li>


            <span th:each="page : ${#numbers.sequence(pageNo, currMaxPage)}" class="text-c">
                <span class="page-item active" th:if="${page}==${pageNo}">
                    <a class="page-link"
                       th:href="@{'/chatHistory1ByText/'+${uid}+'&'+${oid}+'&'+${page}+'/?text='+${text}}"
                       th:text="${page}">
                    </a>
                </span>
                <span class="page-item" th:if="${page}!=${pageNo}">
                    <a class="page-link"
                       th:href="@{'/chatHistory1ByText/'+${uid}+'&'+${oid}+'&'+${page}+'/?text='+${text}}"
                       th:text="${page}"></a>
                </span>
            </span>

            <li class="page-item"><a class="page-link" aria-label="Next"
                                     th:href="@{'/chatHistory1ByText/'+${uid}+'&'+${oid}+'&'+${pageNo+1}+'/?text='+${text}}"
                                     th:if="${pageNo}!=${maxpage}">下一页&rarr;</a></li>
            <li class="page-item"><a class="page-link"
                                     th:href="@{'/chatHistory1ByText/'+${uid}+'&'+${oid}+'&'+${maxpage}+'/?text='+${text}}"
                                     th:if="${pageNo}!=${maxpage}">尾页</a></li>
        </ul>
    </div>
</div>



<script>
    function formatDate(date, format) {
        if (!date) return;
        if (!format) format = "yyyy-MM-dd HH:mm:ss";
        switch (typeof date) {
            case "string":
                date = new Date(date.replace(/-/, "/"));
                break;
            case "number":
                date = new Date(date);
                break;

        }
        if (!date instanceof Date) return;
        var dict = {
            "yyyy": date.getFullYear(),
            "M": date.getMonth() + 1,
            "d": date.getDate(),
            "H": date.getHours(),
            "m": date.getMinutes(),
            "s": date.getSeconds(),
            "MM": ("" + (date.getMonth() + 101)).substr(1),
            "dd": ("" + (date.getDate() + 99)).substr(1),
            "HH": ("" + (date.getHours() + 110)).substr(1),
            "mm": ("" + (date.getMinutes() + 100)).substr(1),
            "ss": ("" + (date.getSeconds() + 100)).substr(1)
        };
        return format.replace(/(yyyy|MM?|dd?|HH?|ss?|mm?)/g, function () {
            return dict[arguments[0]];
        });
    }

    /**
     * 正则表达式显示消息中的emoji图片
     * @param message
     * @returns {*} 返回添加emoji图片标签后的消息
     */
    function showEmoji(message) {
        var result = message,
            regrex = /\[EMOJI:\d+\]/g,
            match;
        while (match = regrex.exec(message)) {
            var emojiIndex = match[0].slice(7, -1);
            var emojiUrl = `/chat/images/${emojiIndex}.gif`;
            result = result.replace(match[0], '<img src="' + emojiUrl + '"/>');
        }
        return result;
    }

    // 显示用户头像
    let a_2 = "data:image/jpeg;base64," + sessionStorage.getItem("pic");

    (function () {
        var coll = document.getElementsByClassName("avatar_2");
        for (var i = 0; i < coll.length; i++) {
            var t = coll[i];
            t.src = a_2;
            t.width = 50;
            t.height = 50;
        }
    })();

    //目标用户头像
    let a_1 = "data:image/jpeg;base64," + sessionStorage.getItem("oPic");

    (function () {
        var coll = document.getElementsByClassName("avatar_1");
        for (var i = 0; i < coll.length; i++) {
            var t = coll[i];
            t.src = a_1;
            t.width = 50;
            t.height = 50;
        }
    })();

    (function () {
        var coll = document.getElementsByClassName("cus_scrpit");
        for (var i = 0; i < coll.length; i++) {
            var t = coll[i];
            var src = t.innerText;
            t.innerHTML = showEmoji(src);
        }
    })();

    (function () {
        var coll = document.getElementsByClassName("reply-time");
        for (var i = 0; i < coll.length; i++) {
            var t = coll[i];
            var src = t.innerText;
            t.innerText = formatDate(src);
        }
    })();

</script>
</body>
</html>